<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
    <meta name="author" content="webThemez.com">
    <title>欢迎来到拴马桩</title>
    <link rel="favicon" href="assets/images/favicon.png">
    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- Custom styles for our template -->
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" type="text/css" href="assets/css/isotope.css" media="screen" />
    <link rel="stylesheet" href="assets/js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="Imperial/assets/img/logo.php">
    <link href="assets/css/detail.css" rel="stylesheet">
    <link href="assets/css/personalDetail.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/ShoppingCart.css"/>
    <link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
    <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
</head>

<body>
<!-- Fixed navbar -->
<div th:replace="~{commons/commons::topbar(active='selling')}"></div>
<!-- /.navbar -->

<header id="head" class="secondary">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h1>Our Projects</h1>
            </div>
        </div>
    </div>
</header>
<br>
<br>
<div th:replace="~{commons/commons::menunav(selected='selling')}"></div>
<div id="app">
<div  style="height: 500px" class="container" v-if="productList.length!==0">
    <h2 class="title">我的认筹</h2>
    <table class="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <th>地址</th>
            <th>编号</th>
            <th>
                状态
            </th>
            <th >编辑</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in productList">
            <td >
                    <p>{{item.city}}{{item.address}}</p>
            </td>
            <td>{{item.number}}</td>
            <td class="num" >
                <span v-if="item.sale==1" class="layui-btn layui-btn-primary layui-border">已开盘</span>
                <span v-if="item.sale==0" class="layui-btn layui-btn-primary layui-border">未开盘</span>
            </td>
            <td class="del">
                <button class="layui-btn layui-btn-warm" @click="del(item);">取消认筹</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div v-else>
    <h2 style="height: 500px"  align="center" ><br><br><br>您还没有认筹车位</h2>
</div>
</div>
<footer id="footer">

    <div class="footer2">
        <div class="container">
            <div class="row">

                <div class="col-md-6 panel">
                    <div class="panel-body">
                        <p class="simplenav">
<!--                            <a href="index.html">Home</a> |-->
<!--                            <a href="about.html">About</a> |-->
<!--                            <a href="services.html">Services</a> |-->
<!--                            <a href="price.html">Price</a> |-->
<!--                            <a href="projects.html">Projects</a> |-->
<!--                            <a href="contact.html">Contact</a>-->
                        </p>
                    </div>
                </div>

                <div class="col-md-6 panel" >
                    <div class="panel-body">
                        <p class="text-right">
                            Copyright &copy; 2021. Template by Shuanmazhuang
                        </p>
                    </div>
                </div>

            </div>
            <!-- /row of panels -->
        </div>
    </div>
</footer>
</body>
</html>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            totalMoney:0,
            productList:[],
            checkAllFlag:false
        },
        created:function(){
            this.cartView();
        },
        methods:{
            cartView:function () {
                let _this=this;
                $.ajax({
                    url:'/getMyRc',
                    success:function (res) {
                        _this.productList=res;
                    }
                })
            },
            //鐐瑰嚮澧炲姞鎴栧噺灏戝晢鍝佹暟閲忔寜閽悗淇敼瀵瑰簲閲戦
            changeMoney:function (product,way) {
                if (way>0) {
                    product.productQuentity++;
                }else{
                    product.productQuentity--;
                    if (product.productQuentity<1) {
                        product.productQuentity=1;
                    }
                }
                this.getTotalMoney();
            },
            //鍗曢€夋璁剧疆
            checkBox:function (item){
                let _this=this;
                let num=0;
                if (typeof item.check == "undefined") {
                    this.$set(item,"check",true);
                }else{
                    item.check = !item.check;
                }
                this.productList.forEach(function (item,value) {
                    if (item.check) {
                        num++;
                    }
                })
                if (num==_this.productList.length) {
                    this.checkAllFlag=true;
                }else{
                    this.checkAllFlag=false;
                }
                this.getTotalMoney();
            },
            //鍏ㄩ€夋寜閽缃�
            checkAll:function (){
                var _this=this;
                this.checkAllFlag = !this.checkAllFlag;
                this.productList.forEach(function(item,index){
                    if (typeof item.check == "undefined") {
                        _this.$set(item,"check",_this.checkAllFlag);
                    }else{
                        item.check = _this.checkAllFlag;
                    }
                })
                this.getTotalMoney();
            },
            //鎬婚噾棰濊缃�
            getTotalMoney:function () {
                var _this=this;
                this.totalMoney = 0;
                this.productList.forEach(function (item,index) {
                    if (item.check) {
                        let num=item.price*1;
                        _this.totalMoney += num;
                    }
                })
            },
            //鍒犻櫎鍟嗗搧
            del: function (item) {
                let b = confirm("是否取消认筹");
                if (b==true){
                    let index=this.productList.indexOf(item);
                    this.productList.splice(index,1);
                    this.getTotalMoney();
                    $.ajax({
                        url:'/delRc',
                        data:{
                            'parkingid':item.plid
                        },
                        success:function (res) {
                            layui.use('layer',function () {
                                if (res=='1'){
                                    layer.msg("取消成功");
                                }else {
                                    layer.msg("取消失败");
                                }
                            })
                        }
                    })
                }
            }
        }
    })
</script>
